<!--
 * @Author: 陈俊升 761723995@qq.com
 * @Date: 2024-03-08 09:21:06
 * @LastEditors: 陈俊升 761723995@qq.com
 * @LastEditTime: 2024-03-08 10:18:57
 * @FilePath: /hr_new_vue3/src/views/Management/Organization/OrganizationManagement/Structure/FileDetail/Components/PersonManagement/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 组织-组织机构管理-组织详情 -->
<template>
  <ContentCard>
    <template #header>
      <PageHeaderNew :title="title" showBack @back="back" emitBack>
      </PageHeaderNew>
    </template>
    <div class="wrap">
      <Left isPersonManagement></Left>
      <main>
        <ConditionBox :margin-bottom="20">
          <template #left>
            <a-input-search
              v-model="nameSearch"
              placeholder="请输入员工名称"
              :style="{
                width: '220px'
              }"
              search-button
              @search="onSearch"
              @press-enter="onSearch"
            >
              <icon-search /> </a-input-search
          ></template>
          <template #right>
            <a-button type="primary" @click="add">新增人员</a-button>
            <a-button type="outline" @click="add">新增人员审批</a-button>
            <a-button type="outline" @click="add">导出</a-button>
          </template>
        </ConditionBox>
        <TableTurn :tableData="getTableData" :args="args" ref="tableRef">
          <a-table-column title="序号" :width="80">
            <template #cell="{ rowIndex }">
              {{ rowIndex + 1 }}
            </template>
          </a-table-column>
          <a-table-column title="姓名" :width="150" data-index="name">
          </a-table-column>
          <a-table-column title="工号" :width="150" data-index="name">
          </a-table-column>
          <a-table-column title="性别" :width="150" data-index="name">
          </a-table-column>
          <a-table-column title="组织" :width="150" data-index="name">
          </a-table-column>
          <a-table-column title="职位" :width="150" data-index="name">
          </a-table-column>
          <a-table-column title="工作性质" :width="150" data-index="name">
          </a-table-column>
          <a-table-column title="入职日期" :width="150" data-index="name">
          </a-table-column>
        </TableTurn>
      </main>
    </div>
  </ContentCard>
</template>

<script lang="ts" setup>
import { GetOrganizationPersonManagement } from '@/apis/management/organization/organizationManagement';
import Left from '../Left/index.vue';
const route = useRoute();
const router = useRouter();

let id = +route.params.id;
let organizationName = ref(route.params.name);
const title = ref(`${organizationName.value}人员管理`);

onBeforeRouteUpdate((to) => {
  id = +to.params.id;
  organizationName.value = to.params.name;
  title.value = `${organizationName.value}人员管理`;
  refresh();
});

let nameSearch = ref();
let tableRef = ref();

// 选择器配置
const args = {
  rowSelection: {
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false
  }
};

const getTableData = async (pageData?: any) => {
  try {
    const res = await GetOrganizationPersonManagement({
      ...pageData,
      id
    });
    return Promise.resolve(res);
  } catch (error: unknown) {
    console.log(error);
  }
};

// 搜索数据
const onSearch = async () => {
  tableRef.value.loadData();
};

const refresh = () => {
  tableRef.value.loadData();
};

const back = () => {
  router.push({
    name: 'OmStructure'
  });
};
</script>

<style lang="less" scoped>
.wrap {
  display: flex;
}
</style>
